.btn {
    display: inline-block;
    appearance: none;
    overflow: hidden;
    outline: 0;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;

    @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);

    &,
    &:active {
        &:focus {
            outline: 0;
            background-image: none;
        }
    }

    &:hover,
    &:focus {
        text-decoration: none;
    }

    &:disabled {
        opacity: $btn-loading-opacity-disabled;

        &:not(.btn-loading) {
            opacity: $btn-opacity-disabled;
        }
    }

    .loading {
        display: inline-block;
        vertical-align: middle;
        margin-left: $btn-loading-gap;
    }
}

.btn-block {
    display: block;
    width: 100%;
}

// Size
.btn-sm {
    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
}

.btn-lg {
    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
}

// Theme
.btn-primary {
    @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}

.btn-secondary {
    @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
}

.btn-default {
    @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}

// Outline
.btn-primary-outline {
    @include button-outline-variant($btn-primary-border);
}

.btn-secondary-outline {
    @include button-outline-variant($btn-secondary-border);
}

.btn-default-outline {
    @include button-outline-variant($btn-default-border);
}
